import React from "react";
import { connect } from 'react-redux'
import { DownloadApp, RecommendWapper, RecommendList, FindMore } from '../style'
import { v4 as uuid } from 'uuid'
import QRCode from '../../../assets/images/download-index-side-qrcode.png'
class WriteList extends React.Component {
  render() {
    return (
      <>
        <DownloadApp>
          <a href="/#" onClick={(e) => e.preventDefault()} className="download">
            <div className="bigCode">
              <img src={QRCode} alt="" />
              <div className="down"></div>
            </div>
            <img src={QRCode} alt="" className="qrcode" />
            <div className="info">
              <div className="title">下载简书手机App<i className="iconfont ic-link"></i></div>
              <div className="description">随时随地发现和创作内容</div>
            </div>
          </a>
        </DownloadApp>
        <RecommendWapper>
          <div className="title">
            <span>推荐作者</span>
            <a className="page-change"><i className="iconfont ic-search-change"></i>
              换一批
            </a>
          </div>
          <RecommendList>
            {
              this.props.WriterList.map((item) => (
                <li key={uuid()}>
                  <a href="/#" onClick={(e) => e.preventDefault()} target="_blank" className="avatar">
                    <img src={item.get('imgUrl')} alt="" />
                  </a>
                  <a className="follow" state="0"><i className="iconfont ic-follow"></i>关注</a>
                  <a href="/#" onClick={(e) => e.preventDefault()} target="_blank" className="name">
                    {item.get('title')}
                  </a> <p>
                    {item.get('content')}
                  </p>
                </li>
              ))
            }
          </RecommendList>
        </RecommendWapper>
        <FindMore>
          <a href="/#" onClick={(e) => e.preventDefault()} target="_blank" className="find-more">
            查看全部<i className="iconfont ic-link"></i></a>
        </FindMore>
      </>
    )
  }
}

const mapState = (state) => ({
  WriterList: state.getIn(['content', 'WriterList'])
})

const mapDispatch = (dispatch) => ({

})

export default connect(mapState, mapDispatch)(WriteList)